<template>
  <div class="home-view" :class="theme">
    <el-container>
      <el-aside width="200px" class="aside">
        <div class="welcome-text">
          欢迎 {{ username }}
        </div>
        <div class="avatar-container">
          <img :src="avatarUrl" alt="Avatar" class="avatar" @error="handleImageError">
        </div>
      </el-aside>
      <el-container>
        <el-main class="main" >
          <el-calendar v-model="currentDate" class="calendar"></el-calendar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>

import { mapGetters } from 'vuex';

export default {
  name: 'HomeView',
  data() {
    return {
      currentDate: new Date()
    };
  },
  computed: {
    ...mapGetters(['username', 'theme', 'avatar']),
    avatarUrl() {
      //console.log('头像路径:', `http://192.168.131.57:8090${this.avatar}`);
      return `http://10.85.201.242:8090${this.avatar}`;
    }
  },
  methods: {
    handleImageError(event) {
      console.error('头像加载失败:', event);
      event.target.src = require('@/assets/default-avatar.jpg'); // 设置默认头像路径
    }
  }

};
</script>

<style scoped lang="stylus">
.home-view
  height 100%

  &.blue
    .aside
      background-color #ecf5ff

  &.light-green
    .aside
      background-color #c2fab6

  .aside
    display flex
    flex-direction column
    align-items center
    padding 20px

    .welcome-text
      font-size 1.5rem
      margin-bottom 20px

    .avatar-container
      width 150px
      height 150px
      background-color #fff
      border-radius 50%
      display flex
      justify-content center
      align-items center
      overflow hidden
      box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.1)

      .avatar
        width 100%
        height 100%
        object-fit cover

  .main
    padding 20px

    .calendar
      margin 0 auto
      width 90%
      box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.1)
@media (max-width: 768px)
  .el-container
    flex-direction column
    align-items center
  .aside
    width 100%
    padding 10px

  .main
    width 100%
    padding 10px
</style>
